<!DOCTYPE html>
<html lang="en" style="margin: 0;width: 100%;height: 100%">
<head>
    <meta charset="UTF-8">
    <title>涟漪</title>
    <script src="../../../js/ColorUtil.js"></script>
</head>
<body style="margin: 0;width: 100%;height: 100%">
<canvas id="myCanvas" style="display: block;"></canvas>
<script>
    var canvas = document.getElementById('myCanvas');
    var cxt = canvas.getContext('2d');

    canvas.width = document.body.offsetWidth;
    canvas.height = document.body.offsetHeight;
    var limitSize = Math.sqrt(canvas.height * canvas.height + canvas.width * canvas.width);

    document.onmousedown = function (e) {
        e = e || window.event;
        var x = e.clientX;
        var y = e.clientY;
        drawCircle(x, y)
    }
    document.ontouchstart = function (e) {
        var x = e.touches[0].clientX;
        var y = e.touches[0].clientY;
        drawCircle(x, y)
    }
    var isRun = false;
    var timer = undefined;

    function drawCircle(x, y) {
        console.log(x, y,canvas.width,canvas.height);
        if (isRun) {
            clearInterval(timer)
            // return;
        }

        var radius = 5;
        cxt.fillStyle = ColorUtil.randomColor();

        //四条对边,取最长一条
        if (x <= canvas.width / 2 && y <= canvas.height / 2) {//左上
            limitSize = Math.sqrt((canvas.width - x) * (canvas.width - x) + (canvas.height - y) * (canvas.height - y));
        }
        else if (x >= canvas.width / 2 && y <= canvas.height / 2) {//右上
            limitSize = Math.sqrt(x * x + (canvas.height - y) * (canvas.height - y));
        }
        else if (x <= canvas.width / 2 && y >= canvas.height / 2) {//左下
            limitSize = Math.sqrt((canvas.width - x) * canvas.width - x + y * y);
        }
        else if (x >= canvas.width / 2 && y >= canvas.height / 2) {//右下
            limitSize = Math.sqrt(x * x + y * y);
        } else {
            limitSize = 0;
        }

        cxt.beginPath();//在循环体外,每次点就开启路径。否则移动端多次后，动画失效。
        timer = setInterval(function () {
            isRun = true;
            radius = 1.1 * radius;
            cxt.arc(x, y, radius, 0, 2 * Math.PI, false)
            cxt.closePath()
            cxt.fill()

            if (radius > limitSize) {
                clearInterval(timer)
                isRun = false;
                console.log('结束', radius);
            }
        }, 10);

    }
</script>
</body>
</html>